Virtual DOM

❓질문

Virtual DOM에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

버츄얼 돔이란 리액트에서 사용하는 돔의 재계산의 최적화를 위한 객체입니다.
이전의 브라우저는 하나의 수정사항이 생기면 전체 페이지를 다시 새로 그리는 과정을 거쳤습니다.
그러나 리액트는 버츄얼 돔에서 변경사항이 있을때 diffing 알고리즘을 통해 바뀐 부분을 찾아내고 재조정 과정을 거친후에 바뀐 부분만 리렌더링합니다.

🏫 정리한 내용

Virtual DOM은 React에서 사용되는 핵심 개념으로, 실제 DOM을 JS 객체 형태로 복제한 가벼운 사본이라고 할 수 있습니다. 브라우저의 DOM은 구조적으로 복잡하고, 이를 직접 조작하는 작업은 성능 비용이 상당히 높습니다. Virtual DOM은 이를 개선하여 웹 애플리케이션의 성능을 최적화하기 위해 등장했습니다.

Virtual DOM의 핵심 아이디어는 상태 변경이 발생할 때마다 전체 UI를 Virtual DOM에 반영하고, 이를 이전 상태와 비교하여 필요한 부분에 한해서 최소한의 DOM 업데이트를 수행하는 것입니다. Virtual DOM을 업데이트하고 비교하는 일은, 실제 DOM을 조작하지 않고 메모리 상에서 업데이트와 비교가 이뤄지기 때문에 가볍고 빠르게 수행됩니다.

React에서 Virtual DOM을 활용되는 구체적인 과정은 다음과 같습니다.

상태 변경: 컴포넌트의 상태나 props가 변경되면 Virtual DOM이 다시 생성됩니다.
재조정(Reconciliation): 비교 알고리즘을 이용해 새로운 Virtual DOM과 이전 Virtual DOM 간의 차이를 계산합니다.
re-render: 계산된 차이에 따라 실제 DOM에서 필요한 부분만 업데이트합니다.

Virtual DOM은 이처럼 DOM 업데이트의 비용을 줄이고, 브라우저 렌더링 성능을 개선합니다.